<template>
  <div class="classify-wrapper">
    <router-link class="search-btn" tag="div" to="/search">
      <van-icon name="search" />
      <span>限时秒杀9.9云</span>
    </router-link>
    <OneTab />
    <template v-if="showContent">
      <SideBar />
      <GoodsList />
    </template>
    <van-loading size="2rem" vertical v-else />
  </div>
</template>

<script>
import OneTab from "@/components/OneTab"
import SideBar from "@/components/SideBar"
import GoodsList from '@/components/GoodsList'
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
  components: {
    OneTab,
    SideBar,
    GoodsList,
  },
  computed: {
    ...mapState({
      showContent: (state) => state.showContent,
      sideList: (state) => state.sideList,
    })
  },
  methods: {
    ...mapMutations(['removeGoodsList']),
    ...mapActions(['getGoodsList']),
  },
  watch: {
    showContent () {
      if (this.showContent) {
        this.removeGoodsList();
        this.getGoodsList({type: this.sideList[0], page: 1, sortType: 'all'});
      }
    }
  }
}
</script>

<style lang="less" scoped>
.classify-wrapper{
  width: 375px;
  .search-btn {
    width: 355px;
    height: 33px;
    background-color: #eee;
    margin: 11px auto 0;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    line-height: 33px;
    color: #a1a1a1;
  }
}
</style>
